/* eslint-disable prettier/prettier */
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { NavigationContainer,CommonActions } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import React from 'react';
import IndexScreen from '../screens/Home';
import BudgetScreen from '../screens/Budget';
import CalculateScreen from '../screens/Calculate';
import StatisticsScreen from '../screens/Statistics';
import ProfileScreen from '../screens/Profile';
import UserCenterScreen from '../screens/Profile/userCenter';
import LoginScreen from '../screens/Login';
import CodeLoginScreen from '../screens/Login/codeLogin';
import SignScreen from '../screens/Login/sign';
import ResetPasswordScreen from '../screens/Login/resetPassword';
import CodeLoginCheckScreen from '../screens/Login/codeLoginCheck';
import FeedBackScreen from '../screens/Profile/feedback';
import ClassifyScreen from '../screens/Classify';
import SubsetsortingScreen from '../screens/Classify/subsetsorting';
import IconListScreen from '../screens/Classify/iconList';
import PlannerScreen from '../screens/Profile/planner';
import PlannerDetailScreen from '../screens/Profile/plannerDetail';
import LastWishListScreen from '../screens/Profile/lastWishList';
import WebviewScreen from '../screens/Profile/webview';
import { /*RFValue*/ } from 'react-native-responsive-fontsize';
import { useTheme } from 'styled-components';
import { Icon } from '../components/Icon/index';
import {Platform, SafeAreaView, View} from 'react-native';
import OverView from "../screens/Calculate/OverView";
import { createRef } from 'react';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

export const navigationRef = createRef();

export function navigate(name, params) {
  navigationRef.current?.navigate(name, params);
}

export function replaceCurrentScreen(name, params) {
  navigationRef.current?.reset({
    index: 0,
    routes: [{ name, params }],
  });
}
export function setTopLevelNavigator(navigatorRef) {
  navigationRef.current = navigatorRef;
}
import EventsChart from "../screens/Statistics/EventsChart";

const { Navigator, Screen } = createBottomTabNavigator();
const AppStack = createNativeStackNavigator();

const getTabBarIcon = (props, type) => {

  const {focused} = props;

  return (
    <View style={focused && 
    { backgroundColor:  'rgba(78, 112, 172, 0.16)', width: /*RFValue*/(56),
      height: /*RFValue*/(30),
      alignItems: "center",
      justifyContent: "center",
      borderRadius: /*RFValue*/(59)}
    }>
      <Icon name={type} {...props} size={/*RFValue*/(24)} color="rgba(65, 79, 102, 1)" />
    </View>
  );
};

export function AppTabs() {
  const insets = useSafeAreaInsets();
  const theme = useTheme();

  return (
    // <SafeAreaView style={{ flex: 1 }}>

    <Navigator
      screenOptions={{
        tabBarActiveTintColor: "rgba(65, 79, 102, 1)",

        tabBarStyle: {
          shadowColor: Platform.OS === 'android' ? '' : 'rgba(0, 0, 0, 0.1)', // 阴影颜色
          shadowOffset: { width: 0, height: 2 }, // 阴影偏移
          shadowOpacity: 1, // 阴影不透明度
          shadowRadius: 8, // 阴影半径
          elevation: 10, // 阴影深度


          paddingBottom: (insets.bottom + 7),
          borderTopWidth: 0,
          height: /*RFValue*/(62 + insets.bottom),
          // paddingBottom: 7,
          paddingHorizontal: /*RFValue*/(8),
          paddingTop: 7,
          backgroundColor: theme.colors['background-variant'],
        },
        tabBarIconStyle: {
          width: /*RFValue*/(56),
          height: /*RFValue*/(30),
          borderRadius: /*RFValue*/(59),
          // backgroundColor:  "rgba(78, 112, 172, 0.16)",
        },
        tabBarLabelStyle: {
          fontSize: /*RFValue*/(12),
          color: 'rgba(65, 79, 102, 1)',
          fontFamily: 'HarmonyOS_Sans_SC_Regular',
          marginTop: /*RFValue*/(1),
        },
      }}
    >
      <Screen
        name="记录"
        component={IndexScreen}
        options={{
          tabBarItemStyle: {
          },
          headerShown: false,
          tabBarIcon: (props) => (
            getTabBarIcon(props, "home")
          ),
        }}
      />
      <Screen
        name="预算"
        component={BudgetScreen}
        options={{
          headerShown: false,
          tabBarIcon: (props) => (
            getTabBarIcon(props, "badage")
          ),
        }}
      />
      <Screen
        name="核算"
        component={CalculateScreen}
        options={{
          headerShown: false,
          tabBarIcon: (props) => (
            getTabBarIcon(props, "static")
          ),
        }}
      />
      <Screen
        name="分析"
        component={StatisticsScreen}
        options={{
          headerShown: false,
          tabBarIcon: (props) => (
            getTabBarIcon(props, "analysc")
          ),
        }}
      />
      <Screen
        name="我的"
        component={ProfileScreen}
        options={{
          headerShown: false,
          tabBarIcon: (props) => (
            getTabBarIcon(props, "my")
          ),
        }}
      />
    </Navigator>
    // </SafeAreaView>
  );
}

const hideHeaderRoutes = [
    'Home',
    'Login',
    'UserCenter',
    'FeedBack',
    'Classify',
    'CodeLogin',
    'CodeLoginCheck',
    'Sign',
    'ResetPassword',
    'Subsetsorting',
    'IconList',
    'Planner',
    'PlannerDetail',
    'LastWishList',
    'WebView',
    'EventsChart',
    'OverView'
]

export function AppRoutes() {
  return (
    <NavigationContainer ref={setTopLevelNavigator}>
      <AppStack.Navigator
          screenOptions={({ route }) => ({
              headerShown: hideHeaderRoutes.indexOf(route.name) === -1,
              headerBackTitleVisible: false
          })}
        initialRouteName="Home"
      >
        <AppStack.Group>
          <AppStack.Screen name="Home" component={AppTabs} />
        </AppStack.Group>
        <AppStack.Screen name="Login" component={LoginScreen} />
        <AppStack.Screen name="OverView" component={OverView} />
        <AppStack.Screen name="FeedBack" component={FeedBackScreen} />
        <AppStack.Screen name="UserCenter" component={UserCenterScreen} />
        <AppStack.Screen name="EventsChart" component={EventsChart} />
        <AppStack.Screen name="Classify" component={ClassifyScreen} />
        <AppStack.Screen name="CodeLogin" component={CodeLoginScreen} />
        <AppStack.Screen name="CodeLoginCheck" component={CodeLoginCheckScreen} />
        <AppStack.Screen name="Sign" component={SignScreen} />
        <AppStack.Screen name="ResetPassword" component={ResetPasswordScreen} />
        <AppStack.Screen name="Subsetsorting" component={SubsetsortingScreen} />
        <AppStack.Screen name="IconList" component={IconListScreen} />
        <AppStack.Screen name="Planner" component={PlannerScreen} />
        <AppStack.Screen name="PlannerDetail" component={PlannerDetailScreen} />
        <AppStack.Screen name="LastWishList" component={LastWishListScreen} />
        <AppStack.Screen name="WebView" component={WebviewScreen} />
      </AppStack.Navigator>
    </NavigationContainer>
  );
}
